<!DOCTYPE html>
<!--添加弹窗层-->
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/static/design/style.css" />
        <script type="text/javascript" src="__PUBLIC__/static/design/jquery.min.js"></script>
        <script src="/Public/static/layer/layer.js"></script> 
        <!--<script src="__PUBLIC__/static/design/agent.js" type="text/javascript"></script>-->
        <script type="text/javascript" >
            var MYOA_JS_SERVER = "";
            var MYOA_STATIC_SERVER = "";
            window._td_ba && window._td_ba.server && (window._td_ba.server.guid = '{330047A2-B27F-6D52-EA5B-ECD662A2D572}');
        </script>
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/static/design/core.css" />
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/static/design/flow_view.css"/>
        <link rel="stylesheet" type="text/css" href="__PUBLIC__/static/design/jquery.tooltip.css" />
        <script type="text/javascript" src="__PUBLIC__/static/design/jquery-ui.custom.min.js"></script>
        <script type="text/javascript" src="__PUBLIC__/static/design/jquery.tooltip.min.js"></script>
        <script type="text/javascript" src="__PUBLIC__/static/design/jquery-plumb-1.5.2-min.js"></script>
    </head>
    <body>
        <div id="canvas" class="canvas">
            <div class="explanation">
                <span class="big3">
                    <img src="/Public/static/design/images/workflow.gif" align="absmiddle" /> 流程名称:<span class="flowName"></span>, 流程分类:<span class="flowSort"></span></span>
                <div>
                    颜色标识说明：<span style="color:#50C625;">■</span>开始节点                &nbsp;&nbsp;<span style="color:#F4A8BD;">■</span>结束节点                &nbsp;&nbsp;<span style="color:#EEEEEE;">■</span>普通节点                &nbsp;&nbsp;<span style="color:#7D26CD;">■</span>子流程节点                &nbsp;&nbsp;<span style="color:#FFBC18;">■</span>外部节点                </div>
            </div>
            <div id="prcsList">
            </div>
        </div>
        <input type="hidden" id="url" value="{:U('getFlowDesign',array('flow_id'=>$flow_id,'prcs_id'=>$prcs_id))}">
    </body>
</html>
<script>
    // chrome fix.
    document.onselectstart = function () {
        return false;
    };

    $(document).ready(function () {
        var url = $('#url').val();
        $.get(url, function (json) {
            console.log(json);
            
            $('.flowName').text(json.flow_name);
            $('.flowSort').text(json.flow_sort);
            
            var fillColor = "gray";	//设置连线的颜色
            //jsPlumb.setRenderMode(jsPlumb.VML);
            jsPlumb.Defaults.Connector = ["Straight", {curviness: 5}];
            jsPlumb.Defaults.DragOptions = {cursor: "pointer", zIndex: 2000};
            jsPlumb.Defaults.PaintStyle = {strokeStyle: fillColor, lineWidth: 2};//设置连线的宽度
            jsPlumb.Defaults.EndpointStyle = {radius: 4, fillStyle: fillColor};//设置连接点的大小
            jsPlumb.Defaults.isSource = true;
            var anchors = [[0.5, 0, 0, -1], [1, 0.5, 1, 0], [0.5, 1, 0, 1], [0, 0.5, -1, 0]];
            var arrowCommon = {foldback: 0.7, fillStyle: fillColor, width: 14};//设置连线箭头的大小
            var aConnection = {
                dynamicAnchors: anchors,
                overlays: [
                    ["Arrow", {location: 0.7}, arrowCommon]//设置连线箭头的位置
                ]
            };

            if (json.total > 0)
            {
                $.each(json.list, function (i, row) {
                    console.log(json.list);
                    var nodeDiv = document.createElement('div');
                    var nodeId = "window" + row.prcs_id;
                    $(nodeDiv)
                            .attr("id", nodeId)
                            .attr("to", row.to)
                            .addClass("window window_" + row.prcs_type)
                            .css({"left": parseInt(row.left), "top": parseInt(row.top) + 60})
                            .attr("title", row.title)
                            .html('<table class="window-content"><tr><td>' + row.prcs_content + '</td></tr></table>');
                    $("#prcsList").append(nodeDiv);

                });

                //遍历节点并连线
                $(".window").each(function () {
                    toArr = $(this).attr("to").split(",");
                    var dynamicAnchors = ["Right", "Left"];
                    // jsPlumb.draggable(jsPlumb.getSelector("#"+this.id));
                    for (var i in toArr)
                    {
                        if (toArr[i] != "" && $("#window" + toArr[i]).size() > 0 && this.id != "window" + toArr[i])
                        {
                            jsPlumb.connect({source: this.id, target: "window" + toArr[i], anchor: [["Perimeter", {shape: "Rectangle", rotation: 0}], ["Perimeter", {shape: "Rectangle", rotation: 0}]]}, aConnection);
                        }
                    }
                });

                $("[title]").tooltip();
            }
        });
    });
</script>